
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D轮播挤压效果</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            perspective: 1200px;
            overflow: hidden;
        }
        
        .carousel-container {
            position: relative;
            width: 80%;
            height: 300px;
            transform-style: preserve-3d;
        }
        
        .slide {
            position: absolute;
            width: 60%;
            height: 100%;
            left: 20%;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 25px 50px rgba(0,0,0,0.3);
            transition: all 0.8s cubic-bezier(0.68, -0.6, 0.32, 1.6);
            transform-style: preserve-3d;
        }
        
        .slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .slide.active {
            transform: translateZ(0) scale(1);
            z-index: 10;
            opacity: 1;
            box-shadow: 0 30px 60px rgba(0,0,0,0.4);
        }
        
        .slide.prev {
            transform: translateX(-30%) translateZ(-100px) scale(0.85);
            opacity: 0.7;
            z-index: 1;
            filter: brightness(0.8);
        }
        
        .slide.next {
            transform: translateX(30%) translateZ(-100px) scale(0.85);
            opacity: 0.7;
            z-index: 1;
            filter: brightness(0.8);
        }
        
        .slide.far-prev {
            transform: translateX(-60%) translateZ(-200px) scale(0.7);
            opacity: 0.4;
            z-index: 0;
            filter: brightness(0.6);
        }
        
        .slide.far-next {
            transform: translateX(60%) translateZ(-200px) scale(0.7);
            opacity: 0.4;
            z-index: 0;
            filter: brightness(0.6);
        }
        
        .controls {
            position: absolute;
            bottom: -60px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 20px;
        }
        
        .controls button {
            background: rgba(255,255,255,0.2);
            border: none;
            color: white;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            font-size: 20px;
            cursor: pointer;
            backdrop-filter: blur(5px);
            transition: all 0.3s;
        }
        
        .controls button:hover {
            background: rgba(255,255,255,0.4);
        }
    </style>
</head>
<body>
    <div class="carousel-container">
        <div class="slide active">
            <img src="https://picsum.photos/id/1018/800/400" alt="山脉风景">
        </div>
        <div class="slide next">
            <img src="https://picsum.photos/id/1015/800/400" alt="森林景观">
        </div>
        <div class="slide far-next">
            <img src="https://picsum.photos/id/1019/800/400" alt="峡谷风光">
        </div>
        <div class="slide prev">
            <img src="https://picsum.photos/id/1016/800/400" alt="沙漠景色">
        </div>
        <div class="slide far-prev">
            <img src="https://picsum.photos/id/1011/800/400" alt="海滩风景">
        </div>
        
        <div class="controls">
            <button id="prev">←</button>
            <button id="next">→</button>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const slides = document.querySelectorAll('.slide');
            const prevBtn = document.getElementById('prev');
            const nextBtn = document.getElementById('next');
            let currentIndex = 0;
            
            function updateSlides() {
                slides.forEach((slide, index) => {
                    slide.classList.remove('active', 'prev', 'next', 'far-prev', 'far-next');
                    
                    if (index === currentIndex) {
                        slide.classList.add('active');
                    } else if (index === (currentIndex - 1 + slides.length) % slides.length) {
                        slide.classList.add('prev');
                    } else if (index === (currentIndex - 2 + slides.length) % slides.length) {
                        slide.classList.add('far-prev');
                    } else if (index === (currentIndex + 1) % slides.length) {
                        slide.classList.add('next');
                    } else if (index === (currentIndex + 2) % slides.length) {
                        slide.classList.add('far-next');
                    }
                });
            }
            
            function nextSlide() {
                currentIndex = (currentIndex + 1) % slides.length;
                updateSlides();
            }
            
            function prevSlide() {
                currentIndex = (currentIndex - 1 + slides.length) % slides.length;
                updateSlides();
            }
            
            nextBtn.addEventListener('click', nextSlide);
            prevBtn.addEventListener('click', prevSlide);
            
            // 自动轮播
            setInterval(nextSlide, 3000);
            
            // 初始化
            updateSlides();
        });
    </script>
</body>
</html>
